<template>
  <div class="dialog">
    <el-dialog
      title="通知模版信息"
      :visible.sync="showDialog"
      width="40%"
      @close="cancel"
    >
      <el-form
        ref="formData"
        label-position="left"
        :model="formData"
        class="el-form"
      >
        <el-form-item label="通知名称:" class="w100p">
          <el-input
            v-model="formData.noticeConfigName"
            clearable
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="通知人:" class="w100p" :disabled="disabled">
          <div
            v-for="(item, index) in formData.noticeMethodList"
            :key="index"
            class="w100p phone"
          >
            <el-input
              v-model="item.contactsName"
              clearable
              :disabled="disabled"
            />
            <div class="w100p">
              <el-checkbox
                v-model="item.cidFlag"
                size="medium"
                :disabled="disabled"
              >APP</el-checkbox>
              <!-- <el-checkbox
                  v-model="item.weChatFlag"
                  size="medium"
              >微信</el-checkbox>-->
              <el-checkbox
                v-model="item.phoneFlag"
                size="medium"
                :disabled="disabled"
              >手机</el-checkbox>
              <el-checkbox
                v-model="item.emailFlag"
                size="medium"
                :disabled="disabled"
              >邮箱</el-checkbox>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import nowpagereq from "@/api/monitoring-alarm/system-notification-configuration";
import nowalarm from "@/api/monitoring-alarm/alarm-contact-management";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    noticeConfigNo: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      disabled: true,
      formData: {},
      showDialog: this.show,
      StaffData: [],
    };
  },
  created() {
    this.queryDataList();
  },
  watch: {
    show(v) {
      this.showDialog = v;
      if (v) {
        this.queryPageList();
      }
    },
  },
  methods: {
    async queryDataList() {
      // 员工
      const { data: Staff } = await nowalarm.querybycondition();
      this.StaffData = Staff;
    },
    queryPageList() {
      this.loading = true;
      nowpagereq.queryByNo(this.noticeConfigNo).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error("查询失败");
        }
        this.formData = res.data;
        this.formData.noticeMethodList.forEach((noticeMethod) => {
          this.StaffData.forEach((item) => {
            if (item.personNo == noticeMethod.personNo) {
              noticeMethod.contactsName = item.contactsName;
            }
          });
        });
      });
    },
    cancel() {
      this.$emit("cancelDialog");
    },
  },
};
</script>
<style scoped lang="scss">
.phone {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 5px;
  justify-content: space-between;
  .el-select {
    width: 48%;
  }
}
</style>
